/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="template-content">
    <div class="template-header"></div>
    <div class="template-main">
      <div class='detail_pay'>
        <!-- 第一部分 -->
        <div class='section-one'>
          <!-- 第一个小部分 -->
          <div class='part-one'>
            <img src='../assets/back.png' alt='back' id='back' @click='pageJump' />
            <img src='../assets/more.png' alt='more' />
          </div>
          <!-- 轮播图部分 -->
          <div class='carousel'>
            <img class='small-img' src='../assets/living.svg' alt='小图片' />
            <img
              src='../assets/product_detail_1.png'
              alt='轮播图1'
              id='carousel-img-1'
              style='display: none'
            />
            <img
              src='../assets/product_detail_2.png'
              alt='轮播图2'
              id='carousel-img-2'
              style='display: none'
            />
            <img
              src='../assets/product_detail_3.png'
              alt='轮播图3'
              id='carousel-img-3'
              style='display: none'
            />
            <img
              src='../assets/product_detail_3.png'
              alt='轮播图4'
              id='carousel-img-4'
              style='display: none'
            />
            <img
              src='../assets/product_detail_3.png'
              alt='轮播图5'
              id='carousel-img-5'
              style='display: none'
            />
          </div>

          <!-- 指示标识部分 -->
          <div class='carousel-indicator'>
            <span class='carousel-indicator-span' id='indicator'>1/5</span>
          </div>

          <!-- 3D机型对比部分 -->
          <div class='gray-section'>
            <span class='gray-section-span'>3D>机型对比></span>
          </div>

          <!-- 图片列表部分 -->
          <div class='product-preview'>
            <img
              src='../assets/product_small_1.png'
              alt='产品1'
              id='img-1'
              class='preview-img'
            />
            <img
              src='../assets/product_small_2.png'
              alt='产品2'
              id='img-2'
              class='preview-img'
            />
            <img
              src='../assets/product_small_3.png'
              alt='产品3'
              id='img-3'
              class='preview-img'
            />
            <img
              src='../assets/product_small_3.png'
              alt='产品4'
              id='img-4'
              class='preview-img'
            />
            <img
              src='../assets/product_small_3.png'
              alt='产品5'
              id='img-5'
              class='preview-img'
            />
          </div>
        </div>

        <div class='section'>
          <div class='price'>
            <span class='price-left'>
              <span class='price-unit'>￥</span>
              <span class='price-true'>12999</span>
              <del class='price-del'>￥13999</del>
            </span>
            <span class='price-right'>距离结束还剩07:14:50</span>
          </div>
          <div class='section-two-two'>
            <span class='two-left'>最高可享12期0分期利息</span>
            <img src='../assets/ic_arrow_right_grey.png' />
          </div>
          <div class='section-two-third'>
            <div class='section-two-third-left'>
              <span class='section-two-third-left-text'>精品</span>
              <span class='section-two-third-left-text'>限时直降800元</span>
              <span class='section-two-third-left-text'>依旧换新补贴</span>
            </div>
            <span class='section-two-third-right'>优惠</span>
          </div>
          <div class='section-two-four'>
            <div class='section-two-four-left'>
              <img src='../assets/ic_public_gps.png' />
              <span>广东 深圳市 龙岗区</span>
            </div>
            <img src='../assets/ic_arrow_right_grey.png' />
          </div>
          <div class='section-two-five'>
            <img src='' />
            <span>现货</span>
          </div>
        </div>

        <div class='section'>
          <div class='section-third-title'>
            【现货速发】HUAWEIMateX512GB+512GB幻影紫
          </div>
          <div class='section-third-text'>
            【华为超级新品季】1.限量买赠价值299元智能视窗保护套2.学生认证优惠100元（下拉了了解详情）3.以旧换新至高补贴500元|更多甄选手机点击了解>>超清临镜双屏|超轻薄四曲折叠
          </div>
          <div class='section-third-div'>
            <div class='section-third-text-div'>
              <span class='section-third-text-div-text1'>MateX5：</span>
              <span class='section-third-text-div-text2'>限量赠无限耳机活力版</span>
            </div>
            <img src='../assets/ic_arrow_right_grey.png' />
          </div>
        </div>

        <div class='section'>
          <div class='section-four'>
            <span class='section-four-left'>已选</span>
            <div class='section-four-right'>
              <div class='section-four-right-text'>
                <span>幻影紫.512G.现货速发</span>
                <img src='../assets/ic_arrow_right_grey.png' />
              </div>
              <div class='product-four'>
                <img src='../assets/mate_50.svg' />
                <img src='../assets/mate_50.svg' />
                <img src='../assets/mate_50.svg' />
              </div>
              <hr style='border: 1px solid #f1f3f5' />
            </div>
          </div>
          <div class='section-four'>
            <div class='section-four-left'>
              <span>搭配</span>
              <span>推荐</span>
            </div>
            <div class='section-four-right'>
              <div class='section-four-img'>
                <div class='product-four'>
                  <img src='../assets/mate_50_pro.svg' />
                  <img src='../assets/mate_50_pro.svg' />
                  <img src='../assets/mate_50_pro.svg' />
                  <img src='../assets/mate_50_pro.svg' />
                </div>
                <img src='../assets/ic_arrow_right_grey.png' />
              </div>
              <hr style='border: 1px solid #f1f3f5' />
            </div>
          </div>
          <div class='section-four' id='section-four-special'>
            <span class='section-four-left'>回收</span>
            <div class='section-four-right'>
              <div class='section-four-right-text'>
                <span>高价回收送多重新补贴</span>
                <img src='../assets/ic_arrow_right_grey.png' />
              </div>
            </div>
          </div>
          <div class='section-four2'>
            <div>
              <img src='../assets/ic_public_todo.png' />
              <span class='section-four2-text'>满48元包邮</span>
            </div>
            <div>
              <img src='../assets/ic_public_todo.png' />
              <span class='section-four2-text'
                >由华为终端提供质量商品，发货开票及售后服务</span
              >
            </div>
          </div>
        </div>

        <div class='section'>
          <h3>用户评价(1500+)</h3>
          <div class='section-five-one'>
            <span class='section-five-one-text'>最热门77</span>
            <span class='section-five-one-text'>有内容858</span>
            <span class='section-five-one-text'>有图217</span>
          </div>
          <div class='section-five-two'>
            <img src='../assets/user.png' />
            <div class='section-five-two-left'>
              <span>几********</span>
              <img src='../assets/wujiaoxing.png' />
            </div>
          </div>
          <div class='section-five-three'>
            华为手机续航很好，拍照清晰，运行畅快，功能也很强大，关键是颜值出众，非常值得推荐！
          </div>
        </div>

        <div class='fixed-bottom'>
          <div class='fixed-bottom-child'>
            <div class='bottom-item'>
              <img src='../assets/tab_home.svg' alt='图1' />
            </div>
            <div class='bottom-item'>
              <img src='../assets/ic_public_comments.svg' alt='图2' />
            </div>
            <div class='bottom-item'>
              <img src='../assets/tab_shopping_bag.svg' alt='图3' />
            </div>
          </div>
          <div class='fixed-bottom-child'>
            <div class='bottom-item'>
              <span class='btn-add'>加入购物袋</span>
            </div>
            <div class='bottom-item'>
              <span class='btn-buy'>购买</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const pageJump = () => {
  router.push('detail');
};
let currentIndex = 1;
const totalImages = 5;
let intervalId;

onMounted(() => {
  const carouselImages = [
    document.getElementById('carousel-img-1'),
    document.getElementById('carousel-img-2'),
    document.getElementById('carousel-img-3'),
    document.getElementById('carousel-img-4'),
    document.getElementById('carousel-img-5'),
  ];
  const previewImages = [
    document.getElementById('img-1'),
    document.getElementById('img-2'),
    document.getElementById('img-3'),
    document.getElementById('img-4'),
    document.getElementById('img-5'),
  ];
  const indicator = document.getElementById('indicator');

  // Function to update carousel and image highlights
  function updateCarousel() {
    // Hide all images
    carouselImages.forEach((img) => (img.style.display = 'none'));
    previewImages.forEach((img2) => img2.classList.remove('highlight'));

    // Show the current image
    carouselImages[currentIndex - 1].style.display = 'block';
    previewImages[currentIndex - 1].classList.add('highlight');

    // Update the indicator
    indicator.textContent = `${currentIndex}/${totalImages}`;
  }

  // Function to change image on interval
  function nextImage() {
    currentIndex = (currentIndex % totalImages) + 1;
    updateCarousel();
  }

  // Change the image every 3 seconds
  intervalId = setInterval(nextImage, 3000);

  // Initial setup
  updateCarousel();
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped>
.template-content {
  background-color: white;
}

.template-header {
  height: 30px;
  background-color: transparent;
}

.template-main {
  height: calc(100vh - 30px);
  overflow: scroll;
}

.detail_pay {
  display: flex;
  flex-direction: column;
  background-color: #f1f3f5;
  padding-bottom: 80px;
}

/* 第一部分 */
.section-one {
  background-color: white;
  padding: 0 20px 20px;
}

/* 第一个小部分 */
.part-one {
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.part-one img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

/* 轮播图部分 */
.carousel {
  height: 240px;
  width: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #f1f1f1;
  margin: 0 auto;
}

/* 新增的小图片 */
.carousel .small-img {
  position: absolute;
  right: -48px; /* 将小图片放在轮播图的右边 */
  width: 48px;
  height: 58px;
  object-fit: cover;
}

.carousel img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* 指示标识部分 - 移到最右边 */
.carousel-indicator {
  display: flex;
  height: 20px;
  width: '100%';
  justify-content: flex-end;
  align-items: center;
}
.carousel-indicator-span {
  background-color: #999999;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 10px;
}

.gray-section {
  display: flex;
  height: 30px;
  width: '100%';
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding: 0 10px; /* Add padding to center text properly */
  margin-left: 20px;
  margin-right: 20px;
}

.gray-section-span {
  background-color: #f2f2f2;
  border-radius: 15px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  padding: 0 10px;
}

/* 图片列表部分 */
.product-preview {
  height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  position: relative;
  margin-top: 10px;
}

.product-preview img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 10px;
}

.product-preview .highlight {
  border: 1px solid black;
}

.section {
  background-color: white;
  margin: 10px 18px;
  padding: 12px;
  border-radius: 12px;
  position: relative;
}

.price {
  background: linear-gradient(to right, #ff6254, #cf0a2c);
  color: white;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.price-left {
  display: flex;
  align-items: flex-end;
  gap: 4px; /* 间隔 */
}

.price-unit {
  font-size: 10px;
  font-weight: bold;
}

.price-true {
  font-size: 15px;
  font-weight: bold;
}

.price-del {
  font-size: 10px;
  text-decoration: line-through;
  color: #f0cccc; /* 调整删除价格的颜色 */
}

.price-right {
  font-size: 10px;
  font-weight: bold;
}

.section-two-two {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  color: grey;
  font-size: 12px;
}

.third-left {
  color: black;
  font-size: 14px;
}

.section-two-third {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.section-two-four-left {
  display: flex;
  align-items: center;
  gap: 4px; /* 每个项目间隔 */
}

.section-two-third-left-text {
  font-size: 10px;
  background-color: #fae8e0;
  color: red;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 2px; /* span之间的间隔 */
}

.section-two-third-right {
  background-color: #e64566;
  font-size: 12px;
  color: white;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 10px;
}

.section-two-four {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.section-two-four-left {
  color: grey;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px; /* 每个项目间隔 */
}

.section-two-five {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.section-third-title {
  font-size: 15px;
  font-weight: bold;
  margin: 10px;
  word-wrap: break-word;
  white-space: normal;
  text-align: left;
}

.section-third-text {
  color: red;
  font-size: 12px;
  margin: 5px 0;
  line-height: 1.5;
  text-align: left;
}

.section-third-text2 {
  font-size: 12px;
  margin: 5px 0;
  line-height: 1.5;
  text-align: left;
}

.section-third-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: pink;
  border-radius: 15px;
  padding: 0 10px;
  height: 12px;
}

.section-third-text-div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.section-third-text-div-text1 {
  color: red;
  font-size: 12px;
  line-height: 1;
}

.section-third-text-div-text2 {
  font-size: 12px;
  line-height: 1;
}

.section-four {
  display: flex; /* 启用 flexbox 布局 */
  justify-content: flex-start; /* 默认情况下元素靠左对齐 */
  gap: 12px;
}

.section-four-left {
  width: 2em;
  display: flex; /* 启用 Flexbox 布局 */
  flex-direction: column; /* 设置为纵向排列 */
  align-items: flex-start;
  margin: 5px 0;
}

.section-four-right {
  flex: 1;
  margin: 5px 0;
  text-align: left;
}

.section-four-right-text {
  display: flex;
  justify-content: space-between;
}

.section-four-img {
  display: flex;
  justify-content: space-between;
}

.product-four img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 10px;
}

#section-four-special {
  margin-bottom: 15px;
}

.section-four2 {
  display: flex;
  gap: 20px;
  background-color: #fafafa;
  justify-content: flex-start;
  align-items: center;
  padding: 5px; /* 调整内边距，避免内容太贴边 */
  position: absolute;
  bottom: 0; /* 将 section-four2 放置在父容器的底部 */
  left: 0;
  right: 0;
  border-radius: 0 0 12px 12px; /* 保证底部有圆角 */
}

.section-four2 img {
  width: 8px;
  height: 8px;
}

.section-four2-text {
  color: grey;
  font-size: 8px;
}

.section h3 {
  text-align: left;
}

.section-five-one {
  display: flex; /* 使用 flexbox 排列子元素 */
  gap: 10px; /* 元素之间间隔10px */
  border-radius: 4px; /* 圆角效果 */
  text-align: left;
}

/* section-five-one 中每个 span 的样式 */
.section-five-one-text {
  font-size: 14px;
  padding: 5px 10px; /* 内边距让文本不至于贴边 */
  background-color: #f2f2f2;
  border-radius: 14px;
  color: #333; /* 设置字体颜色 */
}

/* section-five-two 样式 */
.section-five-two {
  display: flex;
  align-items: center; /* 让图片和文字垂直居中 */
  gap: 10px; /* 图片和文字之间的间距 */
  margin-top: 10px; /* 让 section-five-two 与上面的内容有一定间隔 */
}

/* section-five-two 中的图片样式 */
.section-five-two img {
  width: 30px; /* 控制图片大小 */
  height: 30px;
  object-fit: cover;
  border-radius: 50%; /* 圆形图片 */
}

.section-five-two-left {
  display: flex;
  flex-direction: column; /* 设置为纵向排列 */
}

.section-five-two-left span {
  font-size: 12px;
}

.section-five-two-left img {
  height: 12px;
  width: 60px;
}

/* section-five-three 样式 */
.section-five-three {
  font-size: 14px;
  margin-top: 10px; /* 与上一部分有一定间距 */
  line-height: 1.6; /* 设置行间距，增加可读性 */
  color: #555; /* 字体颜色 */
  text-align: left;
}

/* 底部区域固定 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f3f5; /* 底部区域背景色 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
}

.fixed-bottom-child {
  display: flex;
  justify-content: space-between; /* 水平均分 */
  align-items: center;
  gap: 15px;
}
/* 底部区域中的每个项（图片、按钮） */
.bottom-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 按钮：加入购物袋 */
.btn-add {
  background-color: #dcdcdc; /* 灰色底色 */
  color: red; /* 红色字体 */
  padding: 10px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
}

/* 按钮：购买 */
.btn-buy {
  background-color: red; /* 红色底色 */
  color: white; /* 白色字体 */
  padding: 10px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
}

/* 图片样式 */
.fixed-bottom img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
</style>
